<template>
	<div id="MainBox">
<!-- 		车位管理页面
		<input type="button" value="测试" @click="test01"/>
		<input type="button" value="查询测试" @click="queryAll"/><br/> -->
		<div id="line03">
			审核状态<el-select v-model="param.state01" placeholder="选择审核状态">
		        <el-option
		                v-for="item in CheckState"
		                :key="item.value"
		                :label="item.label"
		                :value="item.value">
		            <span style="">{{ item.label }}</span>
		        </el-option>
		    </el-select>
			审核人<div id="line01">
				<el-input v-model="param.name01" placeholder="搜索审核人">
					<template slot="prepend">姓名</template>
				</el-input>
			</div>
			<el-button type="primary" @click="queryAll">查询</el-button>
		</div>
		<!-- ,,,,,all_time -->
		<el-table
		        :data="list"
		        border
		        style="width: 100%">
		    <el-table-column
		            prop="address"
		            label="车位位置"
		            width="180">
		    </el-table-column>
		    <el-table-column
		            prop="messageName"
		            label="物业名字"
		            width="200">
		    </el-table-column>
		    <el-table-column
		            prop="tel"
		            label="车位主电话"
		            width="100">
		    </el-table-column>
		    <el-table-column
		            prop="adminName"
		            label="处理人"
		            width="100">
		    </el-table-column>
		    <el-table-column
		            prop="message"
		            label="处理消息"
		            width="200">
		    </el-table-column>
		    <el-table-column
		            prop="result"
					:formatter="stateFormatter"
		            label="处理状态"
		            width="100">
		    </el-table-column>
			<el-table-column
			        prop="typeInfoId"
			        label="车位类型"
			        width="100">
			</el-table-column>
		    <el-table-column
		            label="操作"
		            width="100">
		        <template slot-scope="scope">
		            <el-button type="text" size="small" @click="check01(scope.row)">审核</el-button>
					<el-dialog title="审核进行" :visible.sync="dialogFormVisible02">
					    <el-form :model="checkNews02">
							<el-form-item label="车位位置" label-width="120px">
							    <span  autocomplete="off">{{scope.row.address}}</span>
							</el-form-item>
							<el-form-item label="物业名字" label-width="120px">
							    <span  autocomplete="off">{{scope.row.messageName}}</span>
							</el-form-item>
							<el-form-item label="车位主电话" label-width="120px">
							    <span  autocomplete="off">{{scope.row.tel}}</span>
							</el-form-item>
					        <el-form-item label="处理消息" label-width="120px">
					            <el-input v-model="checkNews02.message" autocomplete="off"></el-input>
								
					        </el-form-item>
							<el-form-item label="审核结果" label-width="120px">
								<select v-model="checkNews02.result">
									<option value="0">未审核不可提交</option>
									<option value="1">审核不通过</option>
									<option value="2">审核通过</option>
								</select>
							</el-form-item>
					    </el-form>
					    <div slot="footer" class="dialog-footer">
					        <el-button @click="dialogFormVisible02 = false">取 消</el-button>
					        <el-button type="primary" @click="check02()" :disabled="disabled02" >确 定</el-button>
					    </div>
					</el-dialog>
		        </template>
		    </el-table-column>
		</el-table>
		<el-pagination
		        background
		        layout="prev,pager, next"
		        :total="param.total"
		        :page-size="param.pageSize"
				:current-page="param.current"
		        @next-click="next" @prev-click="prev">
		</el-pagination>
	</div>
</template>

<script>
	import $ from "jquery";
	export default{
		data:function(){
			return{list:[],
			//下为一些展示数组
			CheckState:[{value:0,label:"未审核"},{value:1,label:"审核未通过"},{value:2,label:"审核已通过"},{value:3,label:"所有"}],
		    paramsend: {pageNum: "", pageSize: "5", total: "", current: "1"},
		    param: {pageNum: 2, pageSize: 5, total: 10, current:1,name01:"",state01:0,},
			//下为更改弹框时展示及后续发送的内容
			checkNews02: {message:"",result:0,checkId:0,cartId:0},
			//elemanet-ui需要的变量
			dialogFormVisible02: false,
			disabled02:true,
			}
		},
		created(){
			this.queryAll();
		},
		methods:{
			//点击按钮弹出处理方法
			check01(row){
				this.dialogFormVisible02 = true;
				this.checkNews02.message=row.message;
				this.checkNews02.result=row.result;
				this.checkNews02.checkId=row.checkId;
				this.checkNews02.cartId=row.cartId;
				this.show01();
			},
			//判断按钮是否可用
			show01(){
				if(this.checkNews02.result==0){
					this.disabled02=true;
				}else{
					this.disabled02=false;
				}
				
			},
			//弹出框提交按钮，提交审核更改
			check02(){
				this.dialogFormVisible02 = false;
				let fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/cartCheck/check01",
					headers:{"token":localStorage.getItem("token")},
					type:"put",
					data:{message:fthis.checkNews02.message,result:fthis.checkNews02.result,
						cartId:fthis.checkNews02.cartId,checkId:fthis.checkNews02.checkId},
					success:function (data) {
						let message="失败";
						message=data.message;
						fthis.$message({
							showClose: true,
							message: '审核'+message,
							type: 'success'
						});
						fthis.queryAll();
					}
				})
			},
			//条件查询所有车位申请，参数：处理管理员，申请处理状态
			queryAll:function(){
				let fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/cartCheck/filterQuery",
					headers:{"token":localStorage.getItem("token")},
					data:fthis.param,
					success:function (data) {
						fthis.list=data.list;
						// console.log(fthis.list);
					}
				})
			},
			stateFormatter(row, column, cellValue, index){
				switch(cellValue){
					case 0: return '未审核';
					case 1: return '审核未通过';
					case 2: return '审核已通过';
					default : console.error("错误的状态"+cellValue);
				}
			},
			// 下面三个方法都是分页栏的方法
			prev: function () {
				this.param.current--;
				this.queryAll();
				this.param.total-=5;
			},
			next: function () {
				this.param.current++;
				this.queryAll();
				this.param.total+=5;
			},
			// search(current){
			// 	// console.log(current);
			// 	this.param.current=current;
			// 	this.queryAll();
			// },
			
		},
		watch: {
		    checkNews02: {
		        //深度监听 监听对象中属性的变化以及集合中对象的变化
		        handler: function (novel, old) {
		            this.show01();
		        },
		        deep: true
		    }
		}
	}
</script>

<style>
	#line01{
		width: 300px;
		white-space: nowrap;
		display:inline-block
	}
</style>
